<template>
     <div id="Skill">
       <div class="topcoumt">
           <div class="student-index-list">
                <el-row :gutter="70">
                    <el-col :span="4" style="margin-right:-10px">
                        <div class="add" @click="add">
                           <i class="iconfont icon-jiahao "></i>
                           <p>添加技能</p>
                         </div>
                    </el-col>
                    <el-col :span="4" v-for='(item ,index) in list' :key="index" style="margin-right:-10px" >
                        <div class="grid-content " @click="detailFn(item.id, item.name, item.introduction)">
                            <!-- <img :src="item.iconPath" /> -->
                            <i class="iconfont icon-Group-" @click.stop="deleteFn(item.id)"></i>
                            <div class="box-call">
                                <p :title="item.name">{{item.name}}</p>
                                <p class="borders"></p>
                                <p>{{item.useNum}}</p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-dialog :close-on-click-modal="false"  title="添加技能标签" :visible.sync="dialogVisible" width="500px"  @close="closeDialogs">
                <el-form :model="form" label-width="130px" :rules="rules" ref="form">
                    <el-form-item label="技能标签名称 :"  prop="title">
                        <el-input  v-model="form.title" placeholder="请输入技能标签名称"  maxlength="15" ></el-input>
                    </el-form-item>
                    <el-form-item label="技能标签简介 :" class='tips-dec'>
                        <el-input type="textarea" v-model="form.destion" maxlength="200" @input="datasInput" placeholder="请输入技能标签简介"></el-input>
                        <p style="position:absolute;  left: 280px; top: 130px; font-size:12px; color:#bbbbbb"> {{form.titnums}}/200</p>
                    </el-form-item>
                    <!-- <div class="iconcase">技能标签名称 :</div> -->
                    <!-- <carousel ref="origin" :superurl="superurl" :isActive="form.isActive" v-model="form.isActive" @chooseVal='chooseVal'></carousel> -->
                 </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <div class="button-style savefn"  @click="saveForm('form')" >确 认</div>
                </div>
            </el-dialog>
            <el-dialog :close-on-click-modal="false"  title="编辑技能标签" :visible.sync="dialogs" width="500px"  >
                <el-form :model="form2" label-width="130px" :rules="rules2" ref="form2">
                    <el-form-item label="技能标签名称 :"  prop="title">
                        <el-input type="text"  v-model="form2.title" placeholder="请输入技能标签名称" style="width: 50%;" maxlength="15" ></el-input>
                    </el-form-item>
                    <el-form-item label="技能标签简介 :" class='tips-dec'>
                        <el-input type="textarea" v-model="form2.destion" maxlength="200" @input="datasInput2" placeholder="请输入技能标签简介"></el-input>
                        <p style="position:absolute;  left: 280px; top: 130px; font-size:12px;color:#bbbbbb"> {{form2.titnums}}/200</p>
                    </el-form-item>
                 </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <div class="button-style savefn"  @click="saveFn('form2')" >确 认</div>
                </div>
            </el-dialog>
       </div>
    </div>
</template>

<script>
   // import carousel from '@/components/carousel'
    export default {
        // components: {
        //    carousel
        // },
        data() {
            return {
                //id值
                id:'',
                list:[],
                superurl:[],
                //添加弹层
                dialogVisible:false,
                form:{
                    title:'',
                    isActive:'',
                    destion:'',
                    titnums:0,
                },
                //查看弹层
                dialogs:false,
                //编辑数据
                form2:{
                    title:'',
                    isActive:'',
                    destion:'',
                    titnums:0,
                },
                rules: {
                    title: [
                        { required: true, message: '请输入技能标签名称', trigger: 'blur' },
                    ],
                },
                rules2: {
                    title: [
                        { required: true, message: '请输入技能标签名称', trigger: 'blur' },
                    ],
                },
            }
        },
        created() {
            this.init()
        },
        methods:{
            // //图片集合
            // imgShow(){
            //     let self = this
            //     self.$http.get('/tes/unauthorized/config?keys=technologyIcon').then((response) => {
            //         let res = response.data
            //         if(res.code == '200') {
            //          self.superurl=res.data.technologyIcon
            //         }else if(res.code == '401'){
            //             self.$router.replace({
            //                 path:'/login'
            //             })
            //         }else{
            //             self.$message.error(res.message)
            //         }
            //     })
            // },
            init(){
                let self = this
                self.$http.get('/tes/technology/list').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.list = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //图片展示
            // showDiag(){
            //     let self = this;
            //     this.$nextTick(function(){
            //         self.$refs.origin.calleft=0
            //     })
            // },
             //关闭弹窗
            //  closeDialog(){
            //      this.$refs.form.resetFields()
            //  },
            //添加课程
            add(){
               this.dialogVisible=true
               //this.imgShow()
               //this.showDiag()
               // this.form.isActive ='',
               this.form.title ='',
               this.form.destion ='',
               this.form.titnums = 0
            },
            //弹层展示出来
            detailFn(id,name,introduction ){
                this.dialogs = true
                //this.dialogVisible=true
                this.id = id
                this.form2.title = name
                this.form2.destion =introduction
                this.form2.titnums =this.form2.destion.length
            },
            //字数限制
            datasInput(){
                var txtVal = this.form.destion.length;
                this.form.titnums = txtVal++
                if(txtVal == 200){
                    this.form.titnums = 200
                }
            },
            datasInput2(){
                var txtVal = this.form2.destion.length;
                this.form2.titnums = txtVal++
                if(txtVal == 200){
                    this.form2.titnums = 200
                }
            },
            //关闭弹窗
            closeDialogs(){
                let self =this
                this.$nextTick(function(){
                    self.$refs.form.resetFields();
                })
            },
            //删除
            deleteFn(id){
                let self = this;
                self.$confirm('是否删除选中?', '提示', {  
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        self.$http.delete('/tes/technology/'+id,
                        ).then((response) => {
                            let res = response.data;
                            if(res.code == '200'){
                                self.$message({
                                    message: '删除成功',
                                    type: 'success'
                                })
                                self.init()
                            }else{
                                self.$message.error(res.message)
                            }
                        },(err) => {
                            console.log('err');
                        })
                    }).catch(() => {
                });
            },
            //确认
            saveForm(form){
                let self = this
                self.$refs[form].validate((valid) => { 
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '正在保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/tes/technology',{
                            name:self.form.title,
                            introduction:self.form.destion
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                            self.dialogVisible=false
                            self.init()
                            self.$refs[form].resetFields();
                            loading.close()
                            }else{
                                self.$message.error(res.message)
                                loading.close()
                            }
                        }).catch(() => {
                             console.log(err)
                             loading.close()
                        })
                    }
                })           
            },
            //编辑提交
            saveFn(form2){
                let self = this
                self.$refs[form2].validate((valid) => { 
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '正在保存中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    })
                    self.$http.put('/tes/technology/'+self.id,{
                        name:self.form2.title,
                        introduction:self.form2.destion
                    }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                        
                        self.dialogs=false
                        self.init()
                        self.$refs[form2].resetFields();
                        loading.close()
                        }else{
                            self.$message.error(res.message)
                            loading.close()
                        }
                    }).catch(() => {
                        loading.close()
                    })
                }
                })           
            }
            //改变子组件
            // chooseVal(id,current){
            //  this.form.isActive =id
            // },
            //鼠标经过改变图片
            // hoverImg(item){
            //     item.iconPath=item.iconPath+'.fan.png'
            //      console.log( item.iconPath)
            // },
            // leaveImg(item){
            //    item.iconPath = item.iconPath.substr(item.iconPath,item.iconPath.lastIndexOf('.', item.iconPath.lastIndexOf('.') - 1) );
            // }
        }
    }
</script>
<style scoped>
.el-form>>>.el-input__inner{
    width: 200px;
}
.el-form-item>>>textarea {
    resize: none;
    width: 260px;
    height: 150px;

}
.el-form>>>.el-form-item__content{
    height: auto;
}
.tips-dec{
    margin-bottom: 0px;
}
</style>
<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";
  #Skill {
    width: $width;
    margin: 50px auto;
    color: #727272;
    .student-index-list{
       .el-row {
           margin-bottom: 20px;
            .add{
              border: 1px dashed #999;
              height: 150px;
              width: 178px;
              text-align:center;
              color: #999;
              font-size: 14px;
              background: #fff;
              cursor: pointer;
                i{
                    display: inline-block;
                    margin-top: 50px
                }
                p{
                    margin-top: 10px;
                }
                &:hover{
                    // box-shadow: 0 1px 20px #d2d2d2;
                        color: #1277eb;
                        border: 1px dashed #1277eb;
                }
            }
            .el-col {
                border-radius: 4px;
                margin-bottom: 30px;
               
                &>.grid-content{
                    background:#fff;
                    height: 150px;
                    position: relative;
                    width: 180px;
                    border: 1px dashed #777777;
                    .icon-Group-{
                         font-size: 18px;
                         position: absolute;
                         right: 7px;
                         top: 10px;
                         cursor: pointer;
                    }
                    &:hover{
                       // box-shadow: 0 5px 20px #c4c4c4;
                        cursor: pointer;
                       
                    }
                    .box-call{
                        margin-top: 47px;
                        text-align: center;
                        .borders{
                            border: 1px solid #777777;
                            width: 20px;
                            margin:  20px auto
                        }
                        &>p{
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow:ellipsis;
                            padding: 0 10px;
                        }
                    }
                      &:hover{
                            border: 1px solid #3a5a9a;
                            color: #3a5a9a;
                            .borders{
                                border: 1px solid #3a5a9a;
                            }
                        }
                }
               
                &>.title{
                    text-align: center;
                    padding: 15px 0;
                    font-size: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
       }
    }
    .iconcase{
        margin-left: 20px;
    }
  }
</style>